<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            display: flex;
            /* width: 600px; */
            justify-content: space-around;
            /* background-color: black; */
        }

        .box_box {
            background-image: linear-gradient(transparent, rgb(9, 22, 37));
            width: 600px;
            position: absolute;
            top: 205px;
            height: 50px;
            display: none;

        }


        .timer {
            display: flex;
            width: 60px;
            justify-content: space-between;
        }

        ul {
            list-style: none;
            display: none;

        }

        video {
            position: relative;
        }

        li {
            position: absolute;
            margin-top: 10px;
            color: #fff;
        }

        .box p {
            color: #fff;
        }

        #multiple {
            position: absolute;
        }

        #multiple:hover ul {
            display: block;
        }

        #multiple>ul {
            position: relative;
            bottom: 105px;
        }

        #multiple>ul>input:hover {
            color: rgb(41, 90, 145);
        }

        input {
            border: 0;
        }

        ul>input {
            background-color: rgba(77, 77, 77, 0.411);
            color: #fff;
            width: 45px;
        }

        .samll_box {
            position: absolute;
            height: 50px;
        }


        #volumes:hover #range,
        #volumes:hover #volumesss {
            display: block;
        }

        #range {
            position: relative;
            bottom: 95px;
            left: -50px;
        }

        #range {
            transform: rotate(-90deg);
            display: none;
        }

        .two_box>ol>li {
            color: black;
            position: absolute;
            /*top: 100px; */
        }

        .black {
            color: black;
        }

        #btnGroup {
            display: flex;
        }

        #btnGroup>input,
        #screens {
            background-color: transparent;
            color: #fff;
        }

        #playBtn {
            margin-right: 10px;
            /* font-size: 20px; */
        }

        .timer {
            width: 100px;
        }

        #volumesss {
            color: #fff;
            position: absolute;
            width: 30px;
            bottom: 180px;
            display: none;
            text-align: center;
        }

        .style {
            display: block;

        }

        #container {
            width: 600px;
            overflow: hidden;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="container">
        <video src="./media/iceage4.mp4" id='video'>
        </video>
        <div class="box_box" id="teall">
            <div class="box">
                <!-- 播放、暂停 -->
                <div id='btnGroup'>
                    <input type="button" value='播放' id='playBtn'>

                </div>
                <!-- 时间 -->
                <div class="timer">
                    <p id="secden">00.00</p>
                    <p>/</p>
                    <p id="dura">00.00</p>
                </div>

                <!-- 倍数 -->
                <div id="btnMultiple">
                    <div id="multiple">
                        <p id='text_math'>倍数</p>
                        <ul>
                            <input type="button" value='2.0 X' id='playmultiple1'><br>
                            <input type="button" value='1.5 X' id='playmultiple2'><br>
                            <input type="button" value='0.75X' id='playmultiple3'><br>
                            <input type="button" value='0.5 X' id='playmultiple4'>
                        </ul>
                    </div>
                </div>
                <!-- 音量 -->
                <div id="volumes">
                    <div class="samll_box">
                        <p id="volumess">音量</p>
                        <input type="range" id="range">
                        <p id="volumesss"></p>
                    </div>
                </div>
                <!-- 全屏 -->
                <input type="button" value="全屏" id="screens">
            </div>
            <!-- 弹幕 -->
            <div class="two_box">
                <input type="text" name="" id="text_box">
                <input type="button" value='发送' name="" id="emission">
            </div>
        </div>
        <ol class="black"></ol>
    </div>




    <script src="../random_number.js" controls poster='./media/ffxiv_5.5patch_01_2560x1440.jpg'></script>
    <script>
        let currentTime, duration;
        video.ontimeupdate = function () {
            currentTime = parseInt(video.currentTime); // 获取当前时间
            duration = parseInt(video.duration); // 获取视频总时长
            console.log(currentTime / 100);
            secden.innerText = (currentTime / 100).toFixed(2);
            dura.innerText = duration / 100;
            if (video.ended) {
                playBtn.value = '播放'
            }

        }
        btnGroup.onclick = function (event) {
            if (video.paused) {
                // 暂停按钮
                video.play();
                playBtn.value = '暂停';

            } else {
                // 播放按钮
                video.pause();
                playBtn.value = '播放'

            }
        }


        btnMultiple.onclick = function (event) {
            console.log(event.target.value);
            switch (event.target.id) {
                case 'playmultiple1':
                    video.playbackRate = 2;
                    text_math.innerText = '2.0X'
                    break;
                case 'playmultiple2':
                    video.playbackRate = 1.5;
                    text_math.innerText = '1.5X'
                    break;
                case 'playmultiple3':
                    video.playbackRate = 0.75;
                    text_math.innerText = '0.75X'
                    break;
                case 'playmultiple4':
                    video.playbackRate = 0.5;
                    text_math.innerText = '0.5X'
                    break;
            }
        }

        // 音量
        range.onmousemove = function (event) {
            console.log(range.value / 100);
            video.volume = range.value / 100;
            volumesss.innerText = range.value;
        }

        //全屏
        screens.onclick = function () {
            video.requestFullscreen();
        }

        //弹幕
        let ol = document.querySelector('ol');
        console.log(video.clientHeight);

        emission.onclick = function () {
            if (text_box.value) {
                let li = document.createElement('li');
                li.innerText = text_box.value;
                console.log(li);
                text_box.value = '';
                ol.appendChild(li);
                let x = 650
                let i = (video.offsetWidth);
                let y = random(video.clientHeight - 75);
                let r = random(255);
                let g = random(255);
                let b = random(255);
                let timer = setInterval(function () {
                    i--;
                    li.style.cssText += `
                    display: flex;
                    left:${x--}px;
                    top:${y}px;
                    color: rgb(${r},${g},${b});
                    `
                    if (i < -li.offsetWidth - 50) {
                        ol.removeChild(li);
                        clearInterval(timer);
                    }
                }, 8)
            }
        }
        container.onmouseover = function () {
            teall.classList.add('style');
        }
        container.onmouseleave = function () {
            teall.classList.remove('style');
        }
    </script>


</body>

</html>